<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "requireCity",
});
</script>
<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { filter_api } from "../../api/index";
import { Storage } from "@/utils/database";
import { Toast } from "@/utils/toast";
import { Router } from "@/utils/router";
import { getGlobalPosition } from "@/utils/location";
const keyWord = ref("");
const tabIndex = ref("");
const data = ref({
  type_list: [],
  domestic: [],
});
const clear = () => {
  keyWord.value = "";
  searchState.value = 0;
};
const searchClick = () => {
  searchList();
};
const setTab = (key: string) => {
  tabIndex.value = key;
};
const getCity = () => {
  filter_api().then((res) => {
    data.value = res;
    tabIndex.value = res.type_list[0].key;
  });
};
const getData = computed(() => {
  return data.value[tabIndex.value as "type_list"];
});

const historyKey = "requireCityHistory";
const history = ref<any[]>([]);

const setHistory = (obj: any) => {
  const index = history.value.findIndex((item) => {
    return item.id == obj.id;
  });
  if (index !== -1) return;
  if (history.value.length >= 10) {
    history.value.pop();
  }

  history.value.unshift(obj);
  Storage.setSync(historyKey, JSON.stringify(history.value));
};
const getHistory = () => {
  const data = Storage.getSync(historyKey);
  if (data) {
    history.value = JSON.parse(data);
  }
};
onMounted(() => {
  getCity();
  getHistory();
  getPosition();
});
const clearHistory = () => {
  history.value = [];
  Storage.setSync(historyKey, JSON.stringify(history.value));
};
const searchState = ref(0);
const searchData = ref([]);
const searchList = () => {
  let find = false;
  const arr: any = [];
  Object.keys(data.value).forEach((key) => {
    if (key != "type_list") {
      data.value[key as "type_list"].forEach((item: any) => {
        item.city_list.forEach((obj: any) => {
          if (obj.name.indexOf(keyWord.value) != -1) {
            find = true;
            arr.push({
              name: obj.name,
              id: obj.id,
            });
          }
        });
      });
    }
  });
  if (find) {
    searchState.value = 1;
    searchData.value = arr;
  } else {
    Toast.show("没有找到相关城市");
  }
};
const toRequireHome = (id: number, name: string) => {
  toRequireHome2(id, name);
  setHistory({ id, name });
};
const toRequireHome2 = (id: number, name: string) => {
  Router.redirectTo(`/package/require/pages/index?id=${id}&name=${name}`);
};
const getPosition = () => {
  const fn = () => {
    Toast.show("获取位置失败");
  };
  getGlobalPosition(
    (resp) => {
      location.value = {
        id: resp.cityId,
        name: resp.cityName,
      };
    },
    () => fn()
  );
};
const location = ref({
  id: "",
  name: "广州",
});
</script>

<template>
  <view class="requireCityWrap">
    <view class="headWrap">
      <view class="search">
        <input
          class="search-bar-input"
          v-model="keyWord"
          focus
          placeholder="请输入城市名称"
          @confirm="searchClick"
        />
        <view class="delete" v-if="keyWord" @click="clear">
          <image src="/package/require/static/delete2.png" mode="scaleToFill" />
        </view>
        <view class="button" @click="searchClick">搜索</view>
      </view>
    </view>
    <view class="content" v-if="searchState == 0">
      <view class="cityTabWrap">
        <view
          v-for="(item, index) in data.type_list"
          :key="index"
          class="cityTab"
          :class="tabIndex == item.key && 'active'"
          @click="setTab(item.key)"
        >
          <text>{{ item.name }}</text>
          <view class="activeTab" v-if="tabIndex == item.key"></view>
        </view>
      </view>
      <view class="cityItemWrap">
        <template v-if="tabIndex == 'recommend' &&location.id">
          <view class="cityItemBox">
            <view class="title">定位</view>
            <view class="itembox location">
              <view
                class="item"
                @click="toRequireHome2(location.id, location.name)"
                >
                <image
                  src="/package/require/static/location.png"
                  mode="scaleToFill"
                />
                <text>{{location.name}}</text>
                </view
              >
          
            </view>
          
          </view>
          <view class="cityItemBox history" v-if="history.length">
            <view class="title">历史选择</view>
            <view class="itembox">
              <view
                class="item"
                @click="toRequireHome2(obj.id, obj.name)"
                v-for="(obj, index) in history"
                :key="index"
                >{{ obj.name }}</view
              >
              <view class="item empty"></view>
            </view>
            <view class="historyWord" @click="clearHistory">
              <image
                src="/package/require/static/delete.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </template>

        <view class="cityItemBox" v-for="(item, index) in getData" :key="index">
          <view class="title">{{ item.name }}</view>
          <view class="itembox">
            <view
              class="item"
              @click="toRequireHome(obj.id, obj.name)"
              v-for="obj in item.city_list"
              :key="obj.id"
              >{{ obj.name }}</view
            >
            <view class="item empty"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="searchWrap" v-if="searchState == 1">
      <view
        class="searchItem"
        @click="toRequireHome(item.id, item.name)"
        v-for="(item, index) in searchData"
        :key="index"
      >
        <text class="name">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
page {
  padding-bottom: 0;
  overflow: hidden;
}
.requireCityWrap {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.headWrap {
  padding: 20rpx 50rpx;
  border-bottom: 2rpx solid #f1f1f1;
  background: #fff;
  .search {
    width: 100%;
    height: 68rpx;
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: 1rpx solid #ff7900;
    border-radius: 34rpx;
    backdrop-filter: blur(10rpx);

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20rpx;
    .button {
      flex-shrink: 0;
      width: 96rpx;
      height: 46rpx;
      background: linear-gradient(90deg, #f09027 0%, #ff7900 100%);
      border-radius: 24rpx;
      text-align: center;
      line-height: 42rpx;
      font-size: 22rpx;
      color: #ffffff;
      margin-left: 20rpx;
    }
    .search-bar-input {
      flex-grow: 1;
      height: 100%;
      padding-left: 30rpx;
      line-height: 34rpx;
      font-size: 24rpx;
      color: #333333;
      line-height: 17px;
      margin-left: 20rpx;
    }
    .delete {
      flex-shrink: 0;
      margin-left: 20rpx;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      @include center();
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
.content {
  flex-grow: 1;
  display: flex;

  box-sizing: border-box;
  .cityTabWrap {
    flex-shrink: 0;
    width: 160rpx;
    height: 100%;
    background: #f6f7f8;
    .cityTab {
      height: 120rpx;
      width: 100%;
      text-align: center;
      line-height: 120rpx;
      font-size: 28rpx;
      color: #999999;
      position: relative;
      padding-bottom: env(safe-area-inset-bottom);
      box-sizing: border-box;
      .activeTab {
        width: 6rpx;
        height: 36rpx;
        background: #ff7900;
        border-radius: 0 0 6rpx 6rpx;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
    }
    .active {
      background: #fff;
      text {
        font-size: 27rpx;
        color: #ff7900;
      }
    }
  }
  .cityItemWrap {
    height: calc(100vh - 117rpx);
    flex-grow: 1;
    background: #ffffff;
    box-sizing: border-box;
    padding: 0 50rpx env(safe-area-inset-bottom) 30rpx;
    box-sizing: border-box;
    overflow: scroll;
  }
}
.cityItemBox {
  width: 100%;
  margin-top: 20rpx;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    line-height: 44px;
    margin-bottom: 20rpx;
  }
  .itembox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      text-align: center;
      width: 160rpx;
      height: 60rpx;
      background: #f5f6f8;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .empty {
      visibility: hidden;
    }
  }
}
.searchWrap {
  height: calc(100vh - 117rpx);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  box-sizing: border-box;
  padding: 0 20rpx;
  width: 100vw;
  height: 100%;
  overflow: scroll;
  .name {
    font-size: 28rpx;
    color: #333333;
    line-height: 100rpx;
  }
  .searchItem {
    padding-left: 30rpx;
    height: 100rpx;
    border-bottom: 2rpx solid #f1f1f1;
  }
}
.history {
  position: relative;
  .historyWord {
    position: absolute;
    top: 20rpx;
    right: 0;
    width: 32rpx;
    height: 32rpx;
    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}
.location {
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      margin-right: 10rpx;
      width: 28rpx;
      height: 28rpx;
    }
  }
}
</style>
